<template>
  <div class="extra-header">
    <div class="content">
      <template v-if="status === 0">
        <span class="icon completed"><i class="el-icon-check"/></span>
        <span>上传完成</span>
        <span>累计{{ count }}个文件</span>
      </template>
      <template v-else-if="status === 1">
        <span class="icon error"><i class="el-icon-close" /></span>
        <span>上传出现错误</span>
        <span class="divider"><el-divider direction="vertical" /></span>
        <span>共{{ count }}个文件上传失败</span>
      </template>
      <template v-else-if="status === 2">
        <span class="icon"><i class="el-icon-upload" /></span>
        <span>暂停上传</span>
        <span class="divider"><el-divider direction="vertical" /></span>
        <span>剩余{{ count }}个文件</span>
      </template>
      <template v-else>
        <span class="icon"><i class="el-icon-upload" /></span>
        <span>正在上传</span>
        <span class="divider"><el-divider direction="vertical" /></span>
        <span>剩余{{ count }}个文件</span>
      </template>
    </div>
    <div class="blank" />
    <div class="button-container">
      <el-button
          type="danger"
          class="button auto-size"
          @click="$emit('cancel-all')"
      >
        全部取消
      </el-button>
      <el-button
          type="warning"
          class="button auto-size"
          @click="$emit('stop-all')"
      >
        全部暂停
      </el-button>
      <el-button
          type="success"
          class="button auto-size"
          @click="$emit('resume-all')"
      >
        全部恢复
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
    name: 'TaskHeader',
    props: {
        status: {
            type: Number,
            default: 0
        },
        count: {
            type: Number,
            default: 0
        }
    }
}
</script>

<style scoped>
.extra-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
}
</style>